import { EChartsOption, graphic } from "echarts";
const fontsize = innerWidth / 1920
export const alarmdevicestatisticsOption: EChartsOption = {
    grid: {
        left: '10%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },
    title: {
        text: '{b|告警次数}',
        subtext: '',
        subtextStyle: {
            rich: {
                a: {
                    fontSize: 32 * fontsize,
                    color: 'rgba(190, 255, 255, 1)',
                    fontFamily: 'DigitalNumbers'
                }
            }
        },
        textStyle: {
            rich: {
                b: {
                    fontSize: 12 * fontsize,
                    color: 'rgba(255, 255, 255, 1)',
                    fontWeight: 600
                }
            }
        },
        left: 'center',
        top: "35%"
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
        {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            color: ['rgba(107, 228, 255, 1)', 'rgba(255, 230, 101, 1)'],
            name: '告警次数',
            type: 'pie',
            radius: ['70%', '80%'],
            center: ['50%', '50%'],
            itemStyle: {
                // shadowOffsetX: 0, // 折线的X偏移    
                // shadowOffsetY: 0,// 折线的Y偏移  
                // shadowBlur: 8,  // 折线模糊
                // shadowColor: "red", //折线颜色
            },
            data: [

            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

export const devicealarmrate: EChartsOption = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },

    series: [
        {
            name: '告警处理率',
            type: 'gauge',
            startAngle: 180,
            endAngle: -0,
            radius: "120%",
            center: ['50%', '60%'],
            detail: { formatter: '{value}%', offsetCenter: [0, "50%"], textStyle: { color: 'white', fontSize: 20 * fontsize }, },
            // data: [{ value: 50, name: '告警处理率' }],
            pointer: {
                width: 1, //指针的宽度
                length: "70%",
                //指针长度，按照半圆半径的百分比
                itemStyle: {
                    color: '#FFFFFF'
                }
            },
            progress: {
                // 展示当前进度。
                show: true, // 是否展示进度条
                overlap: false, // 是否重叠
                roundCap: false, // 是否圆顶
                clip: false, // 是否裁掉超出部分
            },
            axisLine: {
                // 设置线条
                lineStyle: {
                    width: 15, // 圆环宽 15
                    opacity: 0.3,
                },
            },
            title: {               //设置仪表盘中间显示文字样式
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 14 * fontsize,
                    color: "#FFFFFF",

                }
            },
            itemStyle: {
                normal: {
                    //具体颜色显示
                    color: {
                        type: "radial", // 使用径向渐变色
                        x: 0.2, // 渐变色的起始点位置
                        y: 1,
                        r: 1, // 渐变半径，值为0到1之间
                        colorStops: [
                            { offset: 0, color: "rgba(107, 228, 255, 0)" }, // 渐变颜色1
                            { offset: 1, color: "rgba(107, 228, 255, 1)" }, // 渐变颜色2
                        ],

                    },
                    //饼状图阴影，值越大阴影亮度越高
                    shadowBlur: 24, // 模糊
                    shadowColor: "rgba(0, 255, 229, 0.5)", // 圆环阴影色
                },
            },
            splitLine: {
                // 分隔线样式。
                show: true, // 是否显示分隔线。
                distance: 30, // 分隔线与轴线的距离。
                length: 1, // 分隔线线长。支持相对半径的百分比。
                lineStyle: {
                    color: '#FFFFFF'
                }
            },
            axisTick: {             // 刻度(线)样式。
                show: true,             // 是否显示刻度(线),默认 true。
                splitNumber: 5,         // 分隔线之间分割的刻度数,默认 5。
                length: 8,              // 刻度线长。支持相对半径的百分比,默认 8。
                lineStyle: {            // 刻度线样式。   
                    color: "#eee",              //线的颜色,默认 #eee。
                    opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 1,                   //线度,默认 1。
                    type: "solid",              //线的类型,默认 solid。 此外还有 dashed,dotted
                    shadowBlur: 10,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                    shadowColor: "#fff",        //阴影颜色。支持的格式同color。
                },
            },
            axisLabel: {            // 刻度标签。
                show: true,             // 是否显示标签,默认 true。
                distance: 5,            // 标签与刻度线的距离,默认 5。
                color: "#fff",          // 文字的颜色,默认 #fff。
                fontSize: 12,           // 文字的字体大小,默认 5。
                formatter: "{value}",   // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
            },
        }
    ]
};

export const Intraweekalarmstatistics: EChartsOption = {

    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['一般', '告警', '紧急'],
        right: 0,
        top: 0,
        textStyle: {
            color: 'white',
        },
        icon: 'roundRect',
        itemHeight: 7,
        itemWidth: 7
    },
    toolbox: {
        feature: {
            saveAsImage: {
                show: false
            }
        }
    },
    grid: {
        top: '18%',
        left: '0%',
        right: '5%',
        bottom: '0px',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLabel: {
                color: 'white',
                fontSize: 12 * fontsize,
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: {
                show: true
            },
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 12 * fontsize,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255,255,255,0.2)',
                }
            }
        }
    ],
    series: [
        {
            name: '一般',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // areaStyle: {


            //     color: {
            //         type: 'linear',
            //         x: 0,
            //         y: 0,
            //         x2: 0,
            //         y2: 1.5,
            //         colorStops: [{
            //             offset: 0, color: 'rgba(64, 221, 255, .6)'
            //         },
            //         {
            //             offset: 1, color: 'rgba(0,0,0,0)' // 100% 处的颜色
            //         }],
            //         global: false // 缺省为 false
            //     }
            // },
            lineStyle: {
                color: 'rgba(14, 168, 235, 1)'
            },
            itemStyle: {

                color: 'rgba(14, 168, 235, 1)'

            },
            emphasis: {
                focus: 'series',
            },
            data: []
        },
        {
            name: '告警',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // areaStyle: {



            //     color: {
            //         type: 'linear',
            //         x: 0,
            //         y: 0,
            //         x2: 0,
            //         y2: 1.5,
            //         colorStops: [{
            //             offset: 0, color: 'rgba(34, 104, 240, .6)'
            //         },
            //         {
            //             offset: 1, color: 'rgba(0,0,0,0)' // 100% 处的颜色
            //         }],
            //         global: false // 缺省为 false
            //     }
            // },
            lineStyle: {
                color: 'rgba(255, 230, 101, 1)'
            },
            itemStyle: {

                color: 'rgba(255, 230, 101, 1)'

            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '紧急',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // areaStyle: {



            //     color: {
            //         type: 'linear',
            //         x: 0,
            //         y: 0,
            //         x2: 0,
            //         y2: 1.5,
            //         colorStops: [{
            //             offset: 0, color: 'rgba(34, 104, 240, .6)'
            //         },
            //         {
            //             offset: 1, color: 'rgba(0,0,0,0)' // 100% 处的颜色
            //         }],
            //         global: false // 缺省为 false
            //     }
            // },
            lineStyle: {
                color: 'rgba(255, 91, 91, 1)'
            },
            itemStyle: {

                color: 'rgba(255, 91, 91, 1)'

            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },

    ]
}


export const proportionofregionalalarms: EChartsOption = {
    tooltip: {
        show: true,
    },
    grid: {
        left: 260,
    },
    legend: {
        orient: "vertical",
        left: "50%",
        top: "middle",
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            color: "#ffffff",
            fontSize: 14 * fontsize,
        },
        data: [],
    },
    color: [
        "rgba(87, 234, 120, 0.70)",
        "rgba(255, 156, 64, 0.70)",
        "rgba(255, 230, 101, 0.70)",
        "rgba(107, 228, 255, 0.70)",
    ],
    series: {
        type: "pie",
        radius: ['20%', '78%'],
        center: ["50%", "50%"],
        roseType: 'radius',
        itemStyle: {
            borderWidth: 10,
        },
        label: {
            // position: 'inside',
            color: "#FFFFFF",
            fontSize: 14 * fontsize,
            fontWeight: 700,
            formatter: "{b}\n\n{colorStyle|{d}%}",
            // formatter: function(params){
            //   return "{b}\n\n{d}%"
            // },
            rich: {
                colorStyle: {
                    color: 'inherit'
                }
            },
            alignTo: "labelLine",
            edgeDistance: 20
        },
        labelLine: {
            show: true,
            length: 10,
            length2: 15,
        },
        // roseType: "area",
        emphasis: {
            label: {
                color: "#FFFFFF",
            },
        },
        data: [
            { value: 40, name: "违规下车识别" },
            { value: 38, name: "入侵识别" },
            { value: 32, name: "安全帽识别" },
            { value: 30, name: "吸烟识别" },
        ],
    },
}

export const alertListOption: EChartsOption = {
    title: [
        {
            text: "告警次数", // 主标题
            textStyle: {
                // 主标题样式
                color: "white",
                fontWeight: "bold",
                fontSize: 15 * fontsize,
            },
            subtext: "0", // 副标题
            subtextStyle: {
                // 副标题样式
                color: "#E2F2F",
                fontSize: 27 * fontsize,
                fontFamily: "Microsoft YaHei, Microsoft YaHei",
                textShadowColor: "#26BEFF",
                textShadowBlur: 6,
                fontWeight: "bold",
            },
            left: "center", // 定位到适合的位置
            top: "36%", // 定位到适合的位置
        },
    ],
    grid: {
        left: '10%',
        right: '4%',
        bottom: '10%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    series: [
        {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            roseType: 'radius',
            color: ['rgba(38, 190, 255, 1)', 'rgba(255, 207, 38, 1)', 'rgba(224, 73, 40, 1)'],
            name: '告警次数',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['50%', '50%'],
            itemStyle: {

            },
            data: [
                // { value: 335, name: '一般' },
                // { value: 310, name: '告警' },
                // { value: 310, name: '紧急' },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
export const AlarmStatisticsOptions: EChartsOption = {
    title: [
        {
            text: "告警次数", // 主标题
            textStyle: {
                // 主标题样式
                color: "white",
                fontWeight: "bold",
                fontSize: 15 * fontsize,
            },
            subtext: "0", // 副标题
            subtextStyle: {
                // 副标题样式
                color: "#E2F2F",
                fontSize: 27 * fontsize,
                fontFamily: "Microsoft YaHei, Microsoft YaHei",
                textShadowColor: "#26BEFF",
                textShadowBlur: 6,
                fontWeight: "bold",
            },
            left: "center", // 定位到适合的位置
            top: "36%", // 定位到适合的位置
        },
    ],
    tooltip: {

    },
    series: [
        {
            name: "告警处理统计",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 0,
                borderWidth: 0,
            },
            label: {
                show: true,
                color: "#FFFFFF",
                formatter: "{b}({d}%)\n{colorStyle|{c}次}",
                rich: {
                    colorStyle: {
                        color: "inherit",
                    },

                },
                fontSize: 15 * fontsize
            },
            labelLine: {
                show: false,
            },
            color: [
                "rgba(242, 63, 63, 0.6)",
                "rgba(60, 229, 189, 0.6)",

            ],
            data: [],
        },
    ],
};